<template>
  <el-dialog class="gl_dialog_TitleLine" title="请选择教练或领队" :visible.sync="isShow" :close-on-click-modal="false" width="440px">
    <el-form ref="chooseOfficialForm" label-width="120px" :model="vo" :rules="rules">
      <el-form-item label="角色类型" prop="registerTagTypeCode" size="mini">
        <el-select v-model="vo.registerTagTypeCode" style="width: 100%;" placeholder="请选择角色类型">
          <el-option v-for="item in roleType" :key="item.code" :label="item.value" :value="item.code" />
        </el-select>
      </el-form-item>
      <el-form-item label="姓名" prop="name" size="mini">
        <el-input v-model.trim="vo.name" clearable placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="证件类型" prop="idCardTypeCode">
        <el-select v-model="vo.idCardTypeCode" placeholder="请选择证件类型" size="mini" style="width: 100%">
          <el-option v-for="item in dict.idCardType" :key="item.code" :label="item.value" :value="item.code" />
        </el-select>
      </el-form-item>
      <el-form-item label="证件号码" prop="idCardNumber" size="mini" :rules="vo.idCardTypeCode === 'IdCard' ? formRules.idCard : formRules.unIdCard">
        <el-input v-model.trim="vo.idCardNumber" clearable placeholder="请输入身份证号码" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="close">{{ $t('button.cancel') }}</el-button>
      <el-button size="mini" :loading="chooseOfficialLoading" type="primary" @click="submitSelectTable">{{ $t('button.submit') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import validator from '@/lib/validate';
import { ChooseOfficial_Rules } from '@/lib/validate/execte';

export default {
  props: {
    // 字典信息
    dict: {
      type: Object,
      default () {
        return {};
      }
    },
    chooseOfficialLoading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      isShow: false,
      vo: {
        registerTagTypeCode: '',
        registerTagTypeName: '',
        idCardTypeCode: '',
        name: '',
        idCardNumber: ''
      },
      rules: new ChooseOfficial_Rules(),
      roleMap: {
        'Coach': '教练',
        'Leader': '领队'
      },
      formRules: {
        idCard: [
          { required: true, message: '请输入证件号码', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              callback(validator.checkIdNumber(value, '身份证号码格式错误'));
            },
            trigger: 'blur'
          }
        ],
        unIdCard: [
          { required: true, message: '请输入证件号码', trigger: 'blur' }
        ]
      }
    };
  },
  computed: {
    roleType() {
      if (this.dict.registerTagType) {
        return this.dict.registerTagType.filter(item => item.code in this.roleMap);
      } else {
        return [];
      }
    }
  },
  watch: {
    isShow(val) {
      if (val === false) {
        this.$refs.chooseOfficialForm.resetFields();
      }
    }
  },
  methods: {
    open () {
      this.isShow = true;
    },
    close () {
      this.isShow = false;
    },
    submitSelectTable () {
      this.$refs.chooseOfficialForm.validate(valid => {
        if (valid) {
          const _vo = Object.assign({}, this.vo);
          _vo.registerTagTypeName = this.roleMap[_vo.registerTagTypeCode];
          this.$emit('onSubmitChooseOfficial', _vo);
        }
      });
    }
  }
};
</script>
